<template>
  <div>
    <!-- 查询部分 -->
    <BaseCard>
      <BaseSearchForm ref="baseSearchFormRef" :searchConfig="searchConfig" @handleSearch="searchHook"
        @handleReset="searchHook">
        <el-button type="primary" plain :icon="Plus" @click="createHook">新增</el-button>
        <el-button type="success" plain :icon="Upload" @click="importHook('/static/file.json')">导入</el-button>
        <el-button type="info" plain :icon="Download" @click="exportExcel">导出</el-button>
        <el-button type="danger" plain :icon="Minus" @click="batchDeleteHook">批量删除</el-button>
      </BaseSearchForm>
    </BaseCard>
    <!-- 新增修改部分 -->
    <BaseModalForm ref="baseModalFormRef" :modalFormConfig="modalFormConfig" :dialogConfig="dialogConfigRpe"
      :modalFormData="modalFormData" :otherFormInfo="modalFormInfo" @change="modalFormItemChange"
      :showPagination="showModalFormFooter" @confirm="confirmHook">
    </BaseModalForm>
    <!-- 表格部分 -->
    <div class="-mt-20">
      <BasePageTable ref="basePageTableRef" :tableConfig="tableConfig" :storeName="storeName"
        :otherQueryInfo="tableQueryInfo" @selectionChange="selectionChangeHook">
        <template #handle-table>
          <div class="table-header">店铺列表</div>
        </template>
        <template #key4="scope">
          <div>{{ mapShopType[scope.row.key4] }}</div>
        </template>
        <template #key5="scope">
          <div>{{ mapShopStatus[scope.row.key5] }}</div>
        </template>
        <template #handle="scope">
          <div>
            <el-button type="primary" round size="small" @click="editHook(scope.row)"> 编辑 </el-button>
            <el-button type="success" round size="small" @click="viewHook(scope.row)"> 详情 </el-button>
            <el-button type="danger" round size="small" @click="deleteHook(scope.row)"> 删除 </el-button>
          </div>
        </template>
      </BasePageTable>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { searchConfig } from "./config/search.config";
import { tableConfig } from "./config/table.config";
import { modalFormConfig, dialogConfig } from "./config/modal.config"
import { Plus, Refresh, Minus, Upload, Download } from "@element-plus/icons-vue";
import { mapShopType, mapShopStatus } from "@/utils/dictsMap";
import { useBaseSearchForm } from "@/old-hooks/use-base-search-form"
import { useBaseModalForm } from "@/old-hooks/use-base-modal-form";
import { useBasePageTable } from "@/old-hooks/use-base-page-table";
import { getItemByProp } from "@/utils/tools"
import { useStoreMgShopStore } from "@/store/storeMg/shop";

defineOptions({
  name: "Shop"
});

// 映射pinia 名称
const storeName = "storeMgShop";

// pinia
const storeMgShopStore = useStoreMgShopStore()

// 查询表格表单dom
const baseSearchFormRef = ref()

// 页面表格dom
const basePageTableRef = ref();

// 弹框配置
const dialogConfigRpe = ref(dialogConfig)

// 表单弹框dom
const baseModalFormRef = ref()

// 表单弹框绑定数据
const modalFormData = ref({})

// 是否显示表单弹框底部操作按钮
const showModalFormFooter = ref(true)

// 自定义表格查询参数 处理特殊场景
const tableQueryInfo = ref({
  userId: "test1"
})

// 自定义新增表格数据参数 处理特殊场景
const modalFormInfo = ref({
  routeId: 1
})

onMounted(() => {
  initSearchFormData()
})

// 初始化查询条件数据
const initSearchFormData = () => {
  // 查询表单 店铺名称配置项数据
  let key4FormItem = getItemByProp(searchConfig.formItems, "field", "key4")
  key4FormItem.options = [
    { value: 1, label: "测试1" },
    { value: 2, label: "测试2" },
  ]
}

// 表单弹框每一项change
const modalFormItemChange = (value, field) => {
  // 处理弹框表单字段联动
  if (field == "key4") {
    if (value == 1) {
      modalFormData.value.key5 = 1
    }
    if (value == 2) {
      modalFormData.value.key5 = 2
    }
  }
}

// base-search-form 查询表格数据hook
const { searchHook } = useBaseSearchForm(basePageTableRef)

// base-modal-form 操作后的callback
const modalCallBack = (name, row) => {
  const key3FormItem = getItemByProp(modalFormConfig.formItems, "field", "key3")
  const key5FormItem = getItemByProp(modalFormConfig.formItems, "field", "key5")
  if (name == "create") {
    dialogConfigRpe.value.title = "新增"
    modalFormConfig.formAttrConfig.disabled = false
    key3FormItem.isHidden = false
    showModalFormFooter.value = true
  }
  if (name == "edit") {
    dialogConfigRpe.value.title = "编辑"
    key3FormItem.isHidden = true
    modalFormConfig.formAttrConfig.disabled = false
    showModalFormFooter.value = true
  }
  if (name == "view") {
    dialogConfigRpe.value.title = "详情"
    modalFormConfig.formAttrConfig.disabled = true
    showModalFormFooter.value = false
  }
  key5FormItem.otherOptions.disabled = true
}

// 导出
const exportExcel = () => {
  // 组装需要导出的列
  const table = storeMgShopStore.list.map((item) => {
    return {
      key1: item.key1,
      key2: item.key2,
      key3: item.key3,
      key4: mapShopType[item.key4],
      key5: mapShopStatus[item.key5],
      key6: item.key6,
      key7: item.key7,
      key8: item.key8
    };
  });
  const obj = {
    table,
    tableName: "店铺列表",
    colHeaders: ["店主姓名", "店铺名称", "店铺UID", "店铺类型", "注入状态", "电子签章", "主体资质", "主体状态"],
  };
  exportHook(obj);
}

// base-modal-form 新增/修改/详情 表格数据 hook
const { createHook, editHook, viewHook, confirmHook } = useBaseModalForm(storeName, baseModalFormRef, basePageTableRef, modalFormData, modalFormConfig, modalCallBack)

// base-page-table 删除/批量删除 多选 导入 导出 hook
const { selectionChangeHook, batchDeleteHook, deleteHook, importHook, exportHook } = useBasePageTable(storeName, basePageTableRef)

</script>
<style scoped lang="less">
.table-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tb-box,
.left-box {
  display: flex;
  align-items: center;
}

.label {
  margin-right: 20px;
}

.item {
  font-size: 12px;
  margin-left: 40px;
}
</style>